<template>
    <div :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import editChart from '@/js/element/chart.js';
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            myChart: null
        };
    },
    methods: {
        setPercentage(option) {
            let totalData = option.series.map((item) => {
                return item.data;
            });

            let newArr = [];
            for (let a = 0; a < totalData.length; a++) {
                let element = totalData[a];
                for (let b = 0; b < element.length; b++) {
                    if (newArr[b] && newArr[b].length) {
                        newArr[b].push(element[b]);
                    } else {
                        newArr[b] = [];
                        newArr[b].push(element[b]);
                    }
                }
            }

            let sumArr = [];
            for (let c = 0; c < newArr.length; c++) {
                let element = newArr[c];
                let sum = eval(element.join('+'));
                sumArr[c] = [];
                for (let d = 0; d < element.length; d++) {
                    let value = element[d];
                    sumArr[c].push(Math.ceil((value / sum) * 100));
                }
            }

            let seriesData = [];
            for (let i = 0; i < sumArr.length; i++) {
                let value = sumArr[i];
                for (let j = 0; j < value.length; j++) {
                    let element = value[j];
                    if (seriesData[j] && seriesData[j].length) {
                        seriesData[j].push(element);
                    } else {
                        seriesData[j] = [];
                        seriesData[j].push(element);
                    }
                }
            }

            for (let index = 0; index < option.series.length; index++) {
                option.series[index].data = seriesData[index];
            }

            option.xAxis.max = 100;
            option.xAxis.axisLabel.formatter = '{value} %';

            option.tooltip.formatter = function(param) {
                let arr = ['' + param[0].name + '<br />'];
                for (let index = 0; index < param.length; index++) {
                    let element = param[index];
                    arr.push('' + element.marker + element.seriesName + ':' + newArr[element.dataIndex][element.seriesIndex] + '<br />');
                }
                return arr.join('');
            };
        }
    },
    created() {
        editChart.init(this);
        register.addComponent(this);
    },
    mounted() {
        this.setPercentage(this.element.attribute.chartOption.option);
        this.myChart = echarts.init(document.getElementById(this.id));
        this.myChart.setOption(this.element.attribute.chartOption.option);
    },
    destroyed() {
        editChart.remove(this);
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}
</style>